<script lang="ts" setup>
import { ref, defineEmits } from 'vue'
import { useVbenModal } from '@vben/common-ui'
import { message, DatePicker, Button, Popconfirm } from 'ant-design-vue'
import type { VxeGridProps } from '#/adapter/vxe-table'
import { useVbenVxeGrid } from '#/adapter/vxe-table'
import { listSearchTemplate, deleteSearchTemplate } from '#/api/common'

const emit = defineEmits(['fetchData'])
const data = ref<any>({})
const date = ref<any>('')

const [Modal, modalApi] = useVbenModal({
  class: 'w-3/5',
  appendToMain: true,
  confirmText: '保存',
  onCancel() {
    modalApi.close()
  },
  onConfirm() {
    if (!date.value) {
      modalApi.close()
      return
    }
    modalApi.close()
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      date.value = ''
      data.value = modalApi.getData<Record<string, any>>()
    }
  },
})

interface RowType {
  [key: string]: any
}
const gridOptions: VxeGridProps = {
  pagerConfig: {
    enabled: false,
  },
  columns: [
    { title: '序号', type: 'seq', width: 50 },
    { field: 'title', title: '自定义名称', width: 150 },
    { field: 'group_name2', title: '分组', width: 150 },
    { field: 'realname', title: '操作人', width: 80 },
    { field: 'create_time', title: '操作时间', minWidth: 100 },
    { title: '操作', minWidth: 100, slots: { default: 'action' } },
  ],
  exportConfig: {},
  height: '380px',
  keepSource: true,
  size: 'mini',
  proxyConfig: {
    ajax: {
      query: async ({}) => {
        const res = await listSearchTemplate({})
        return res
      },
    },
    sort: true,
  },
  showOverflow: false,
  sortConfig: {
    defaultSort: { field: 'created_at', order: 'desc' },
    remote: true,
  },
}

/**
 * 删除搜索条件
 */
async function handleDelete(row: RowType) {
  await deleteSearchTemplate({ id: row.id })
  message.success('删除成功')
  gridApi.query()
}

const [Grid, gridApi] = useVbenVxeGrid({
  gridOptions,
})
</script>

<template>
  <Modal title="条件管理">
    <Grid>
      <template #action="{ row }">
        <div>
          <Popconfirm title="确认删除" :description="`确定要删除这条条数据吗？此操作不可恢复。`" ok-text="确认" cancel-text="取消" @confirm="handleDelete(row)" @cancel="() => {}">
            <Button class="mr-2" type="primary" size="small" danger>删除</Button>
          </Popconfirm>
        </div>
      </template>
    </Grid>
  </Modal>
</template>
